<template>
  <div class="app-container">
    <h3>查看报名情况</h3>
    <div class="inputBox">
      <el-input v-model="search.registryName" class="input" placeholder="请输入报名入口名称" />
      <el-input v-model="search.name" class="input" placeholder="请输入姓名" />
      <el-select v-model="search.gender" class="input" placeholder="请选择性别">
        <el-option label="女" value="0"/>
        <el-option label="男" value="1"/>
      </el-select>
      <el-input v-model="search.phoneNum" class="input" placeholder="请输入手机号" />
      <el-date-picker
        v-model="search.startTime"
        class="startDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择开始日期"/>
      <el-date-picker
        v-model="search.endTime"
        class="endDate"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="选择结束日期"/>
      <div style="display:inline-block">
        <el-input v-model="search.startAge" class="inputAge" placeholder="年龄区间开始" /> -
        <el-input v-model="search.endAge" class="inputAge" placeholder="年龄区间结束" />
      </div>

      <el-button type="primary" class="ml10" @click="toSearch">查询</el-button>
      <el-button type="primary" @click="toReset">重置</el-button>
    </div>
    <div>
      <el-button type="primary" class="ml10" @click="toAward">颁奖</el-button>
      <el-button plain type="primary" class="ml10" @click="toDownLoadExcel">导出</el-button>
      <br>
    </div>
    <br>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <template slot="empty">
        <div class="noData">暂无数据</div>
      </template>
      <el-table-column align="center" label="序号" width="60">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="所属报名" width="">
        <template slot-scope="scope">
          {{ scope.row.registryName }}
        </template>
      </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="性别">
        <template slot-scope="scope">
          {{ scope.row.gender===1?'男':'女' }}
        </template>
      </el-table-column>
      <el-table-column label="民族" width="60">
        <template slot-scope="scope">
          {{ scope.row.nation }}
        </template>
      </el-table-column>
      <el-table-column label="年龄" width="60">
        <template slot-scope="scope">
          {{ scope.row.age }}
        </template>
      </el-table-column>
      <el-table-column label="身份证" width="110">
        <template slot-scope="scope">
          {{ scope.row.idcard }}
        </template>
      </el-table-column>
      <el-table-column label="爱好及特长" width="110">
        <template slot-scope="scope">
          {{ scope.row.hobbies }}
        </template>
      </el-table-column>
      <el-table-column label="学校">
        <template slot-scope="scope">
          {{ scope.row.school }}
        </template>
      </el-table-column>
      <el-table-column label="年级">
        <template slot-scope="scope">
          {{ scope.row.grade | filterGrade }}
        </template>
      </el-table-column>
      <el-table-column label="个人照片">
        <template slot-scope="scope">
          <div v-if="scope.row.imgUrl" class="img_box" @click="checkImg(scope.row.imgUrl)">
            <img :src="scope.row.imgUrl" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="110">
        <template slot-scope="scope">
          {{ scope.row.phoneNum }}
        </template>
      </el-table-column>
      <el-table-column label="联系地址" width="110">
        <template slot-scope="scope">
          {{ scope.row.mailAddress }}
        </template>
      </el-table-column>
      <el-table-column label="邮编" width="110">
        <template slot-scope="scope">
          {{ scope.row.postcode }}
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="110">
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>
      </el-table-column>
      <el-table-column label="省">
        <template slot-scope="scope">
          {{ scope.row.province }}
        </template>
      </el-table-column>
      <el-table-column label="市">
        <template slot-scope="scope">
          {{ scope.row.city }}
        </template>
      </el-table-column>
      <el-table-column label="指导教师">
        <template slot-scope="scope">
          {{ scope.row.teacherName }}
        </template>
      </el-table-column>
      <el-table-column label="工作单位">
        <template slot-scope="scope">
          {{ scope.row.teacherJobUnit }}
        </template>
      </el-table-column>
      <el-table-column label="教师联系电话" width="110">
        <template slot-scope="scope">
          {{ scope.row.teacherPhone }}
        </template>
      </el-table-column>
      <el-table-column label="颁奖状态">
        <template slot-scope="scope">
          {{ scope.row.awardsStatus === 1?'已颁奖':'未颁奖' }}
        </template>
      </el-table-column>
      <el-table-column label="获奖情况">
        <template slot-scope="scope">
          {{ scope.row.level || '' }}
        </template>
      </el-table-column>
      <el-table-column label="获奖证书">
        <template slot-scope="scope">
          <div v-if="scope.row.awardImg" class="img_box" @click="checkImg(scope.row.awardImg)">
            <img :src="scope.row.awardImg" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备注说明">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column label="报名时间" width="154">
        <template slot-scope="scope">
          {{ scope.row.registryTime }}
        </template>
      </el-table-column>

    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%">
      <div style="width:100%; height:100%">
        <img :src="dialogImgUrl" style="width:100%;" alt="">
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关   闭</el-button>
        <!-- <el-button type="primary" @click="addCourseBack()">提交</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'
import axios from 'axios'
import config from '@/utils/config'
import { getRegistryInfo, registryStatus, editRecommendStatus, registryDownload } from '@/api/registry'

export default {
//   components: { Pagination, detail, remark, remarkPropt },
  components: { Pagination },
  filters: {
    filterGrade(num) {
      const map = {
        '0': '幼儿园',
        '1': '小学一年级',
        '2': '小学二年级',
        '3': '小学三年级',
        '4': '小学四年级',
        '5': '小学五年级',
        '6': '小学六年级',
        '7': '初中一年级',
        '8': '初中二年级',
        '9': '初中三年级',
        '10': '高中一年级',
        '11': '高中二年级',
        '12': '高中三年级',
        '13': '大学及以上'
      }
      return map[num]
    }
  },
  data() {
    return {
      dialogVisible: false,
      dialogImgUrl: '',
      momList: [],
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 0,
        pageSize: 10
      },
      search: {
        registryName: '',
        name: '',
        gender: '',
        phoneNum: '',
        startTime: '',
        endTime: '',
        startAge: '',
        endAge: ''

      }
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
    // this.getPermissonFn() // 获取按钮权限 vuex的button
  },
  methods: {
    toDownLoadExcel() {
      // this.connectAguments()
      window.location.href = config.BaseUrl + '/registry/info/download' + this.connectAguments()
    },
    connectAguments() {
      let str = '?'
      for (const key in this.search) {
        if (this.search[key]) {
          str += key + '=' + this.search[key] + '&'
        }
      }
      console.log(str)
      if (str === '?') { // 说明没有带参数
        return ''
      } else {
        return str
      }
    },
    checkImg(url) {
      this.dialogVisible = true
      this.dialogImgUrl = url
    },
    detail(index) {
      const query = { isLook: true, data: this.list[index] }
      this.$router.push({
        path: 'add',
        query
      })
    },
    // 更新推荐状态
    changeRecommendStatus(id, status) {
      console.log(id, status)
      const strAsk = status === 0 ? '是否上推荐？' : '是否下推荐？'
      const str = status === 0 ? '已上推荐' : '已下推荐'
      this.$confirm(strAsk, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        status === 0 ? status = 1 : status = 0
        const data = { id, recommendStatus: status }
        editRecommendStatus(data).then(res => {
          if (res.code === '200') {
            this.fetchData();
            this.$message({
              type: 'success',
              message: str
            });
          } else {
            Message.error(res.message + '-' + res.data)
          }
        })
      }).catch(() => {
      })
    },
    // 更新报名状态
    changeStatus(id, status) {
      console.log(id, status)
      const strAsk = status === 1 ? '是否开启？' : '是否关闭？'
      const str = status === 1 ? '已开启' : '已关闭'
      this.$confirm(strAsk, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        status === 0 ? status = 1 : status = 0
        const data = { id, status }
        registryStatus(data).then(res => {
          if (res.code === '200') {
            this.fetchData();
            this.$message({
              type: 'success',
              message: str
            });
          } else {
            Message.error(res.message + '-' + res.data)
          }
        })
      }).catch(() => {
      })
    },
    toAward() {
      this.$router.push({
        path: 'award',
        query: {}
      })
    },
    add() {
      this.$router.push({
        path: 'add',
        query: {}
      })
    },
    // 查询
    toSearch() {
      if (this.search.startTime && this.search.endTime) {
        const start = new Date(this.search.startTime).getTime();
        const end = new Date(this.search.endTime).getTime();
        if (start > end) {
          Message.error('结束时间必须大于开始时间')
          return false
        }
      }
      if (this.search.startTime && this.search.startTime.indexOf(' 00:00:00') === -1) this.search.startTime += ' 00:00:00'
      if (this.search.endTime && this.search.endTime.indexOf(' 23:59:59') === -1) this.search.endTime += ' 23:59:59'
      this.listLoading = true
      const newData = this.objectCon(this.listQuery, this.search)
      console.log(newData)
      getRegistryInfo(newData).then(response => {
        // console.log('查询', response)
        if (response.code === '200') {
          this.list = response.data.list
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          Message.error(response.message + '-' + response.data)
        }
      })
    },
    fetchData() {
      this.listLoading = true
      const newData = this.objectCon(this.listQuery, this.search)
      getRegistryInfo(newData).then(response => {
        if (response.code === '200') {
          this.list = response.data.list
          console.log('订单数据：', this.list)
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 0.5 * 1000)
        } else {
          this.listLoading = false
        }
      })
    },
    // 重置
    toReset() {
      this.search.registryName = ''
      this.search.name = ''
      this.search.gender = ''
      this.search.phoneNum = ''
      this.search.startTime = ''
      this.search.endTime = ''
      this.search.startAge = ''
      this.search.endAge = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.totalDiv{
    width: 100%;
    height: 50px;
    line-height: 50px;
    border:1px solid #EEE;
    border-top: none;
    box-sizing: border-box;
    padding-left: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: center;
    .txt{
        color: #999;
    }

    .red {
        color: #a60807;
        margin-left: 10px;
    }
    .blue {
        color: #09c;
        margin-left: 4px;
    }
}
  .el-icon-remove {
    margin-left: 10px;
  }
  .img_url {
    width: 110px;
    height: 110px;
  }
  .inputBox{
    div{ margin-bottom: 10px;}
    .input:nth-of-type(1){ width: 160px;}
    .input:nth-of-type(2){ width: 140px;}
    .input:nth-of-type(3){ width: 120px;}
    .input:nth-of-type(4){ width: 130px;}
    .teacherType { width: 150px;}
    .teacherSex { width: 120px;}
    .startDate { width: 150px;}
    .endDate { width: 150px;}
    .teacherStatus { width: 150px;}
    .inputAge{
        width: 124px;
    }
  }
  .img_box{
      width: 50px;
      height: 50px;
      background:#f5f5f5;
  }
  .img_box img{
      width: 100%;
      height: 100%;
  }
</style>
